<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 阻止表单默认提交   onsubmit="return false" -->

    <button class="get">get</button>
    <button class="set">set</button>
    <form action="" method="get" onsubmit="return false">
        <div class="input-group">
            <label for="user">用户名:</label>
            <input type="text" id="user" name="user" placeholder="请输入..">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <span>爱&emsp;好:</span>
            <label><input type="checkbox" name="hobby" value="sing">唱歌</label>
            <label><input type="checkbox" name="hobby" value="dance">跳舞</label>
            <label><input type="checkbox" name="hobby" value="rap">rap</label>
            <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
        </div>
        
        <div class="input-group">
            <label >年龄:</label>
            <input type="number"  name="number" min="1" max="999" step="1" value="1">
        </div>

        <div class="input-group">
            <label >建议:</label>
            <textarea name="advice"  cols="30" rows="10" maxlength="50"></textarea>
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>
</body>
<script>

    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var numberInp = document.getElementsByName("number")[0];
    var adviceInp = document.getElementsByName("advice")[0];

    var submitBtn = document.querySelector("[type='submit']");

    var get = document.getElementsByClassName("get")[0];
    var set = document.getElementsByClassName("set")[0];

    // 元素节点的属性 表单相关

    // 所有表单空间
    // value   获取和设置表单元素value值
    // name    获取和设置表单元素name属性

    // input 相关
    // type    获取和设置表单元素type属性(input )
    // placeholder  获取和设置表单元素placeholder属性

    // input:number
    // min   获取和设置表单元素的min属性 
    // max   获取和设置表单元素的max属性
    // step   获取和设置表单元素的step属性

    // textarea
    // cols   获取和设置表单元素的cols属性
    // rows   获取和设置表单元素的rows属性
    // maxlength   获取和设置表单元素的maxlength属性
    // placeholder   获取和设置表单元素的placeholder属性

    get.onclick = function(){
        console.log(userInp.type);
        console.log(userInp.name);
        console.log(userInp.placeholder);
        console.log(numberInp.min);
        console.log(numberInp.max);
        console.log(numberInp.step);
    }

    set.onclick = function(){
        pwdInp.type = pwdInp.type === "text" ? "password" : "text";
        pwdInp.placeholder = "输密码啊!"
    }




</script>
</html>